<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div id="header"><h1>todolist</h1></div>
    <button id="clearCache">Reset</button>
    <div id="bigBox">
        <div class="typeNav">
            <ul id="typeNavUl">
                <button class="filterBtn" data-id="red"></button>
                <button class="filterBtn" data-id="yellow"></button>
                <button class="filterBtn" data-id="green"></button>
                <button class="filterBtn" data-id="all"></button>
                <!-- <li>计时器</li> -->
                <div id="timer">
                    <input type="text" value=00 id="hours">:<input type="text" value=00 id="mins" maxlength="2">
                </div>
                <button id="saveTimer">Save</button>
                <div id="timerBox">
                    <!-- <li class="time">10:00 
                        <button class="startBtn">GO</button>
                        <button class="deleteBtn">Del</button>
                    </li>    -->
                </div>            
            </ul>
        </div>
        <div class="content">
            <div id="inputBox">
                <input type="text" placeholder="Add a task!" id="itemInput">
                <div id="aType">
                    <div id="aaType">  
                    <!-- 这个盒子是为了做 三个点 冒泡加的 -->
                        <button class="typeButton" data-id="red"></button>
                        <button class="typeButton" data-id="yellow"></button>
                        <button class="typeButton" data-id="green"></button>
                        <table id="itemsCounts">
                            <tr>
                                <td id="finCnts">#</td>
                                <td id="noFinCnts">#</td>
                            </tr>
                            <tr>
                                <td>Done</td>
                                <td>Todo</td>
                            </tr>
                        </table>
                        <!-- <span id="nofnshedCounts">待完成</span> -->
                    </div>
                    <div id="itemsBox">
                         <div class="items yellow" data-id="1">
                            泡妞
                            <button>Del</button>
                            <button>Finished</button>
                        </div> 
                    </div>    
                </div>
            </div>
            
        </div>
        <div class="memo">
            <h2>Memo</h2>
            <textarea name="" id="memoContent" cols="10" rows="10"></textarea>
            <div id="memoStretch"></div>
        </div>
    </div>
    <div id="bodyColorBox">
        <button data-id="#D9AA52"></button>
        <button data-id="#CDCDCD"></button>
        <button data-id="#292A2D"></button>
        <button data-id="#73675C"></button>
    </div>
    <script src="javascript.js"></script>
</body>
</html>